<template>
  <el-row style="margin-left: 30px">
    <el-col style="margin-top: 20px">
      <div style="
          margin: 10px 0px;
          text-align: left;
          font-weight: bold;
          font-size: 30px;
        ">
        欢迎来到智疗!
      </div>
      <el-card style="border-radius: 10px; background-color: #eaf1fa">
        <div style="display: flex; align-items: center">
          <div style="
              width: 50%;
              text-align: left;
              display: flex;
              align-items: center;
            ">
            <el-avatar>
              <el-icon color="#FFFFFF" size="25px">
              <UserFilled />
            </el-icon>
            </el-avatar>
            <h1 style="font-size: 30px; margin-left: 20px">
              {{ user.userName }}
            </h1>
          </div>
          <div style="text-align: right; width: 50%">
            <el-button @click="dialogVisible3 = true" round style="
                background-color: #ffffff80;
                width: 150px;
                height: 60px;
                font-size: 20px;
              ">药房介绍</el-button>
          </div>
        </div>
        <el-row style="margin-top: 20px">
          <el-col :span="5">
            <div style="text-align: left">ID</div>
            <div style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                margin: 10px 0px;
              ">
              {{ user.id }}
            </div>
          </el-col>
          <el-col :span="4">
            <div style="text-align: left">真名</div>
            <div style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                margin: 10px 0px;
              ">
              {{ user.realName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div style="text-align: left">电话号码</div>
            <div style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                margin: 10px 0px;
              ">
              {{ user.phone }}
            </div>
          </el-col>
          <el-col :span="5">
            <div style="text-align: left">医生级别</div>
            <div style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                margin: 10px 0px;
              ">
              {{ user.doctorLevelId }}
            </div>
          </el-col>
          <el-col :span="5">
            <div style="text-align: left">用户类型</div>
            <div style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                margin: 10px 0px;
              ">
              {{ userType }}
            </div>
          </el-col>
        </el-row>
        <el-row style="display: flex; text-align: left">
          <div style="width: 93%; align-items: center">
            <el-carousel class="carousel1" height="20px" direction="vertical" :autoplay="true">
              <el-carousel-item v-for="item in message" :key="item">
                <el-link :underline="false" @click="open" style="display: unset">
                  <h3 style="font-size: 12px; margin: 0px 10px" class="medium">
                    {{ item }}
                  </h3>
                </el-link>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-link :underline="false" @click="open" style="font-weight: bold; width: 5%">
            更多 <i style="font-weight: bold" class="el-icon-arrow-right"></i>
          </el-link>
        </el-row>
      </el-card>
      <el-row style="display: flex; align-items: center; margin: 20px 0px">
        <el-card style="border-radius: 10px; width: 38%">
          <el-row style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              height:100px
            ">
            <el-icon color="#6777ef" size="50px">
              <Unlock />
            </el-icon>
            <div style="margin: 0px 10px; flex-grow: 2; text-align: left;width: 40%;">
              <div style="font-weight: bold; font-size: 20px; margin: 15px 0px">
                修改密码
              </div>
              <div style="font-size: 15px; color: gray; margin: 15px 0px">
                定期修改为高强度密码以保护您的账号
              </div>
            </div>
            <el-button @click="updatePassword()" style="
                flex-grow: 1;
                font-size: 14px;
                margin-top: 10px;
                height: 50px;
                width: 80px;
                padding: 0px;
                margin: 0px 20px;
              ">
              立即修改
            </el-button>
          </el-row>
        </el-card>
        <div style="width: 20%">
          <el-avatar img :src="img" style="height: 200px; width: 200px"></el-avatar>
        </div>
        <el-card style="border-radius: 10px; width: 38%">
          <el-row style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              height:100px
            ">
              <el-icon color="#6777ef" size="50px">
              <Edit />
            </el-icon>
            <div style="margin: 0px 10px; flex-grow: 2; text-align: left;width: 40%;">
          
              <div style="font-weight: bold; font-size: 20px; margin: 15px 0px">
                修改账户信息
              </div>
              <div style="font-size: 15px; color: gray; margin: 15px 0px">
                修改您账户上的个人信息(用户名、真实姓名、电话号码)
              </div>
            </div>
               <el-button @click="updateIdentity()" style="
                flex-grow: 1;
                font-size: 14px;
                margin-top: 10px;
                height: 50px;
                width: 80px;
                padding: 0px;
                margin: 0px 20px;
              ">
              立即修改
            </el-button>
  
           
          </el-row>
        </el-card>
      </el-row>
      <!-- 产品生态 -->
      <el-card style="margin-top: 80px" shadow="never">
        <el-row style="
            font-size: 30px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 36px;
          ">
          我们的产品生态
        </el-row>
        <div style="display: flex; justify-content: space-between">
          <el-col :span="12" style="background: #e9eef350; margin: 0px 10px">
            <el-image :src="url2"></el-image>
            <el-card shadow="hover" style="background: #e9eef350; margin: 12px 20px" body-style="padding:20px 10px">
              <el-row style="display: flex; align-items: center">
                <i class="el-icon-edit-outline" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
                <div style="text-align: left">
                  <div style="
                      font-size: 20px;
                      font-weight: bold;
                      margin-bottom: 16px;
                    ">
                    门诊挂号收费站
                  </div>
                  <div style="font-size: 12px; color: gray">
                    挂号、收费、退费
                  </div>
                </div>
              </el-row>
            </el-card>
            <el-card shadow="hover" style="background: #e9eef350; margin: 12px 20px" body-style="padding:20px 10px">
              <el-row style="display: flex; align-items: center">
                <i class="el-icon-refresh" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
                <div style="text-align: left">
                  <div style="
                      font-size: 20px;
                      font-weight: bold;
                      margin-bottom: 16px;
                    ">
                    门诊医生工作站
                  </div>
                  <div style="font-size: 12px; color: gray">
                    病历首页、检查申请、检验申请、门诊确诊、开立处方
                  </div>
                </div>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12" style="background: #e9eef350; margin: 0px 10px">
            <el-card shadow="hover" style="background: #e9eef350; margin: 12px 20px" body-style="padding:20px 10px">
              <el-row style="display: flex; align-items: center">
                <i class="el-icon-data-line" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
                <div style="text-align: left">
                  <div style="
                      font-size: 20px;
                      font-weight: bold;
                      margin-bottom: 16px;
                    ">
                    门诊医技工作站
                  </div>
                  <div style="font-size: 12px; color: gray">
                    患者检查、患者检验、医技管理
                  </div>
                </div>
              </el-row>
            </el-card>
            <el-card shadow="hover" style="background: #e9eef350; margin: 12px 20px" body-style="padding:20px 10px">
              <el-row style="display: flex; align-items: center">
                <i class="el-icon-s-operation" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
                <div style="text-align: left">
                  <div style="
                      font-size: 20px;
                      font-weight: bold;
                      margin-bottom: 16px;
                    ">
                    门诊药房工作站
                  </div>
                  <div style="font-size: 12px; color: gray">
                    药品管理、门诊发药、门诊退药
                  </div>
                </div>
              </el-row>
            </el-card>
            <el-image :src="url3"></el-image>
          </el-col>
        </div>
      </el-card>

      <el-row style="
          font-size: 30px;
          font-weight: bold;
          text-align: left;
          margin-bottom: 36px;
          margin-top: 80px;
        ">
        帮助中心
      </el-row>
      <div style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 30px;
        ">
        <el-col :span="16" style="margin-right: 20px">
          <el-menu style="
              background: -webkit-linear-gradient(bottom, #39c5bb10, #39c5bb74)
                no-repeat;
              border-radius: 20px;
            ">
            <div style="text-align: left; margin: 25px; font-weight: bold">
              FAQ
            </div>
            <el-menu-item v-for="(item, index) in questions" :key="index" @click="showAnswer(item)"
              style="font-weight: bold">
              <el-row type="flex" justify="space-between">
                <div style="text-align: left">
                  <i class="el-icon-chat-dot-round" style="font-size: 25px"></i>
                  <span>{{ item.question }}</span>
                </div>
                <div style="text-align: right"></div>
              </el-row>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" style="background: #e9eef350" body-style="padding:20px 10px" @click="open">
            <el-row style="display: flex; align-items: center">
              <i class="el-icon-s-check" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
              <div style="text-align: left">
                <div style="
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 16px;
                  ">
                  客服咨询
                </div>
                <div style="font-size: 15px; font-weight: bold">进入</div>
              </div>
            </el-row>
          </el-card>
          <el-card shadow="hover" style="background: #e9eef350; margin-top: 20px" body-style="padding:20px 10px"
            @click="open">
            <el-row style="display: flex; align-items: center">
              <i class="el-icon-lock" style="color:#6777ef;font-size:60px;margin-right: 20px;n"></i>
              <div style="text-align: left">
                <div style="
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 16px;
                  ">
                  安全反馈
                </div>
                <div style="font-size: 15px; font-weight: bold">
                  进入<i class="el-icon-arrow-right" style="font-weight: bold"></i>
                </div>
              </div>
            </el-row>
          </el-card>
        </el-col>
      </div>
    </el-col>

    <el-dialog title="药房介绍" v-model="dialogVisible3" width="50%">
      <el-card class="card2">
        药房工作站主要由药品管理、发药、退药、三部分组成。
      </el-card>
      <el-card class="card2">
        <h1 style="margin-top: 0px">药品管理</h1>
        用于药房管理员维护医院使用的药品信息。包括增加药品、修改药品信息、删除药品、查询药品
      </el-card>
      <el-card class="card2">
        <h1 style="margin-top: 0px">门诊发药</h1>
        患者持缴费发票，到药房窗口，药房管理员根据患者的病历号，查询相应的已缴费尚未发放的药品信息，就可以为患者发药了。
      </el-card>
      <el-card class="card2">
        <h1 style="margin-top: 0px">门诊退药</h1>

        当患者对于已领的药品未使用，想进行退药时，使用此操作。如想做退费，则需要先进行退药处理。
      </el-card>
      <template #footer class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false">O K</el-button>
      </template>
    </el-dialog>

    <el-dialog title="修改密码" v-model="dialogVisible1" width="30%">
      <el-form style="width: 90%" :model="updatePassWordForm" :rules="updatePassWordRules" ref="updatePassWordForm"
        label-width="100px">
        <el-form-item label="旧密码" prop="oldPassWord">
          <el-input v-model="updatePassWordForm.oldPassWord" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="updatePassWordForm.password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassWord">
          <el-input v-model="updatePassWordForm.rePassWord" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer class="dialog-footer">
        <el-button @click="dialogVisible1 = false">返回</el-button>
        <el-button type="success" @click="resetForm('updatePassWordForm')">重置</el-button>
        <el-button type="primary" @click="confirmUpdatePassword()">提交</el-button>
      </template>
    </el-dialog>
    <el-dialog title="修改身份信息" v-model="dialogVisible2" width="30%">
      <el-form style="width: 90%" :model="updateUserInfoForm" :rules="updateIdentityRules" ref="updateUserInfoForm"
        label-width="100px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="updateUserInfoForm.userName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="updateUserInfoForm.realName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="updateUserInfoForm.phone" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer class="dialog-footer">
        <el-button @click="dialogVisible2 = false">返回</el-button>
        <el-button type="success" @click="resetForm('updateUserInfoForm')">重置</el-button>
        <el-button type="primary" @click="confirmUpdateIdentity()">提交</el-button>
      </template>
    </el-dialog>

    <el-dialog :title="detailQuestion.question" v-model="dialogVisible" width="30%">
      <span>{{ detailQuestion.answer }}</span>
      <template #footer class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </template>
    </el-dialog>
  </el-row>
</template>

<script>
import img from "@/assets/tubiao.png";
import { h } from "vue";
import { mapState } from "vuex";
import { updateUserInfoAPI } from "@/api/updateUserInfoAPI";
import { updatePassWordAPI } from "@/api/updatePassWordAPI";
import { getUserAPI } from "@/api/getUserAPI";
export default {
  data() {
    return {
      carouseData: [
        { url: require("@/assets/01.jpg") },
        { url: require("@/assets/02.jpg") },
        { url: require("@/assets/03.jpg") },
        { url: require("@/assets/04.jpg") },
        { url: require("@/assets/05.jpg") },
        { url: require("@/assets/06.jpg") },
        { url: require("@/assets/07.jpg") },
      ],
      url1: require("@/assets/background1.jpg"),
      url2: require("@/assets/background2.jpg"),
      url3: require("@/assets/background3.jpg"),
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      img: img,
      user: {
        id: 1,
        userName: "",
        realName: "",
        userType: 4,
        doctorLevelId: 1,
      },
      detailQuestion: {
        question: "",
        answer: "",
      },

      questions: [
        {
          question: "什么是东软智能医疗云平台？",
          answer:
            "HIS英文全称 hospital information system，直译为中文就是医院信息系统。HIS系统的主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、经济管理、综合管理与统计分析等。临床诊疗部分主要以病人信息为核心，将整个病人诊疗过程作为主线，随着病人在医院中每一步诊疗活动的进行产生并处理各种诊疗数据与信息。整个诊疗活动主要由各种与诊疗有关的工作站来完成，并将这部分临床信息进行整理、处理、汇总、统计、分析等。此部分包括：门诊医生工作站、住院医生工作站、护士工作站、临床检验系统、输血管理系统、医学影像系统、手术室麻醉系统等。",
        },
        {
          question: "东软云HIS价值主张与愿景？",
          answer:
            "基于云计算资源构建可持续发展的中小型医疗卫生服务机构IT生态系统，帮助中小医院以云计算的方式建设、运维院内IT系统，有效解决中小医院由于业务快速发展带来的IT持续投入的成本负担问题。1)	基于云计算SaaS服务模式，注册即可全面应用，微成本投入，无信息化预算瓶颈。2)	供医疗服务、健康管理服务、互联网+信息惠民一体化业务支撑平台。3)	网底服务为核心的分级诊疗服务体系，助力医改信息化基础设施建设。",
        },
        {
          question: "来东软能学到什么？",
          answer: "哈哈哈，一周速通开发，你说能学到什么？",
        },
      ],
      message: [
        "七月东软牛人学院第二期：推荐你的朋友，一起来坐牢吧！",
        "东软HIS盛夏六月，好礼接“粽”而至活动结束公告。",
        "东软HIS发布1.55版本，优化挂号收费，检查检验，药品管理等界面，新增常见问题功能。",
      ],
      updatePassWordForm: {
        id: 0,
        oldPassWord: "",
        password: "",
        rePassWord: "",
      },
      updatePassWordRules: {
        id: [{ required: true, message: "请输入id", trigger: "blur" }],
        oldPassWord: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        rePassWord: [
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],
      },
      updateUserInfoForm: {
        id: 0,
        userName: "",
        realName: "",
        phone: "",
      },
      updateIdentityRules: {
        id: [{ required: true, message: "请输入id", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 回答常见问题
    showAnswer(item) {
      this.detailQuestion.question = item.question;
      this.detailQuestion.answer = item.answer;
      this.dialogVisible = true;
    },
    open() {
      this.$notify.info({
        title: "提示",
        message: h("i", { style: "color: #39C5BB" }, "更多内容，敬请期待！"),
      });
    },
    //清空输入框中的内容
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //打开密码修改界面
    updatePassword() {
      this.dialogVisible1 = true;
    },
    //打开身份信息修改界面
    updateIdentity() {
      this.dialogVisible2 = true;
      this.updateUserInfoForm.id = this.user.id;
      this.updateUserInfoForm.userName = this.user.userName;
      this.updateUserInfoForm.realName = this.user.realName;
      this.updateUserInfoForm.phone = this.user.phone;
    },
    confirmUpdatePassword() {
      this.$refs["updatePassWordForm"].validate(async (valid) => {
        if (valid) {
          if (this.updatePassWordForm.oldPassWord != this.user.password) {
            this.$message.error("旧密码错误");
          } else if (
            this.updatePassWordForm.password !=
            this.updatePassWordForm.rePassWord
          ) {
            this.$message.error("两次输入的密码不一致");
          } else {
            this.$confirm("点击确定将确认修改密码，是否继续？", "确认修改")
              .then(async () => {
                const { data: res } = await updatePassWordAPI(
                  this.updatePassWordForm
                );
                if (res.statusCode == 'C200') {
                  this.$message.success(res.msgId);
                  this.getUser();
                  this.dialogVisible1 = false;
                } else {
                  this.$message.error(res.msgId);
                }
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "操作取消",
                });
              });
          }
        } else {
          return false;
        }
      });
    },
    confirmUpdateIdentity() {
      this.$refs["updateUserInfoForm"].validate(async (valid) => {
        if (valid) {
          this.$confirm("点击确定将确认修改个人信息，是否继续？", "确认修改")
            .then(async () => {
              const { data: res } = await updateUserInfoAPI(
                this.updateUserInfoForm
              );
              if (res.statusCode == 'C200') {
                this.$message.success(res.msgId);
                this.getUser();
                this.dialogVisible2 = false;
              } else {
                this.$message.error(res.msgId);
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "操作取消",
              });
            });
        } else {
          return false;
        }
      });
    },
    // 获取用户
    async getUser(){
      const { data: res } = await getUserAPI(this.user.id)
      if(res.statusCode == 'C200'){
        var list = res.result;
        var user = list[0];
        this.user = user;
        window.sessionStorage.setItem("userInfo", JSON.stringify(user));
      }
    }
  },

  computed: {
    // userType(){
    //   return this.$store.state.pharmacyOptions.userType
    // },
    ...mapState('pharmacyOptions', ['userType'])

  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem("userInfo"));

    this.$store.commit('pharmacyOptions/USERTYPEFORMAT', this.user.userType)
  },
};
</script>

<style scoped>
.el-card.card1>>>.el-card__body {
  padding: 0px 0px;
}

.el-card.card2 {
  box-shadow: none;
  border-radius: 0px;
  text-align: left;
}

.carousel0.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.carousel0.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-divider--horizontal {
  margin: 10px 0px;
  background-color: gray;
}

.el-carousel__item h3 {
  font-size: 14px;
  opacity: 0.75;
  line-height: 20px;
  margin: 0;
  text-align: left;
}

.carousel1.el-carousel__item {
  background-color: 39C5BB50;
}
</style>
